<template>
  <div class="contents">
    <PanelTitle title="名录总览" />
    <div class="mt">
      <div class="choseTab">
        <div :class="curChose == 0 ? 'active' : ''" @click="curChose = 0">
          企业名录
        </div>
        <div :class="curChose == 1 ? 'active' : ''" @click="curChose = 1">
          产品名录
        </div>
      </div>
      <table v-if="curChose == 0">
        <thead>
          <tr>
            <th>企业名称</th>
            <th>企业类型</th>
            <th>所在村镇</th>
          </tr>
        </thead>

        <tbody>
          <tr v-for="item,index in curOne" :key="index">
            <td>{{ item.name }}</td>
            <td>
              <div v-if="item.type == 1">种植</div>
              <div v-if="item.type == 2">加工</div>
              <div v-if="item.type == 3">流通</div>
              <div v-if="item.type == 4">自然人</div>
              <div v-if="item.type == 5">其他</div>
            </td>
            <td>{{ item.streetName }} {{ item. villageName}}</td>
          </tr>
        </tbody>
      </table>
      <table v-if="curChose == 1">
        <thead>
          <tr>
            <th>产品名称</th>
            <th>所属企业</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item,index in curTwo" :key="index">
            <td>{{ item.name }}</td>
            <td>{{ item.entName }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";

let curChose = ref(0);

let curOne = ref([]);
let curTwo = ref([]);

onMounted(async () => {
  // 企业目录
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/property/main/list",
    method: "get",
    params: { 
      pageNum: 1,
      pageSize: 8,
      yearly: new Date().getFullYear() 
    },
  });
  curOne.value = res.data.list;
  // 产品目录
  let ress = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/gap/promotion/product/list",
    method: "get",
    params: { 
      pageNum: 1,
      pageSize: 8,
      yearly: new Date().getFullYear() 
    },
  });
  curTwo.value = ress.data.list;
});
</script>
<style scoped lang="scss">
.contents {
  background: linear-gradient(
    to bottom,
    rgba(5, 79, 99),
    rgba(5, 79, 99, 0.1),
    rgba(5, 79, 99)
  );
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);
  .mt {
    margin-top: vh(-40);
  }
}

.choseTab {
  display: flex;
  align-items: center;
  margin: vh(10) vw(18);
  > div {
    width: vw(106);
    height: vh(31);
    line-height: vh(31);
    box-shadow: 0px 0px 22px 0px rgba(0, 235, 232, 0.42);
    border-radius: vh(6);
    border: vh(1) solid #57f5a1;
    // background: rgba(20, 74, 88, 0.57);
    // border-image: linear-gradient(0deg, #c1fdc9, #90f9c4, #57f5a1) 1 1;
    background: rgba(9, 37, 45, 0.95);
    font-weight: 400;
    font-size: vh(14);
    color: #32c8a7;
    text-align: center;
    margin-right: vh(10);

    cursor: pointer;
  }
  > .active {
     background: none;
    border-radius: vh(6);
    border: 1px solid #19f7ff;
   
    color: #ffffff;
  }
}

table,
th,
td {
  border: vh(1) solid #2cd7bc;
  border-collapse: collapse;

  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: vh(10);
  text-align: center;
}
table {
  width: vw(344);
  height: vh(155);
  margin: 0 auto;
}
th {
  color: #fff;
  background: rgba(50, 200, 167, 0.45);
  min-width: vw(60);
  line-height: vh(20);
  padding: vh(4) 0;
}
td {
  color: #2cd7bc;
  line-height: vh(14);
  padding: vh(4) 0;
}
</style>